<template>
  <div class="my-goods-list">
    <MyHeader></MyHeader>
    <MyTable :list="list">
      <template #header>
        <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
        </tr>
      </template>
      <template #body="scope">
        <td>{{scope.row.id}}</td>
        <td>{{scope.row.goods_name}}</td>
        <td>{{scope.row.goods_price}}</td>
        <td>  
          <input  type="text"
          v-if="scope.row.inputVisible"
          v-focus
          @blur="scope.row.inputVisible=false"
          v-model="scope.row.inputValue"
          @keydown.enter="enter(scope.row)"
          
          
          
          ><!--  -->
          <button v-else  class="badge bg-warning text-dark"
          @click="scope.row.inputVisible=true"
          >
            +tage
          </button>
          <span v-for="(item,index) in scope.row.tags" :key="index"
          class="badge bg-warning text-dark"
          >
            {{item}}
          </span>
        </td>
        <td><button @click="del(scope.row.id)" class="btn btn-danger btn-sm">删除</button></td> 
      </template>
    </MyTable>
  </div>
  <!--  goods_name  goods_price  id  inputValue: ""  inputVisible: false  tags: Array(2)
0: "舒适"
1: "透气"  -->
</template>

<script>
import MyHeader from '../components/MyHeader.vue'
import MyTable from '../components/MyTable.vue'
export default {
  name: 'GoodslistMygoodslist',
  components:{
    MyHeader,
    MyTable
  },

  data() {
    return {
      list:[]
    };
  },
  async created(){
    let res=await this.$axios({
      url:'/api/goods'
    })
    this.list=res.data.data
    console.log(this.list);
  },
  
  methods: {
    del(id){
      let index=this.list.findIndex(item=>item.id=id)
      this.list.splice(index,1)
    },
    
    enter(obj){
      if(obj.inputValue===''){
        return alert('不能为空')
      }
      obj.tags.push(obj.inputValue)
      obj.inputValue=''
    }
    
  },
};
</script>

<style lang="less" scoped>
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>
